<template>
  <div class="content">
    <div class="userInfo">
      <router-view></router-view>
    </div>
    <!-- 列表 -->
    <ul class="user-ul">
      <!-- 我的收藏 -->
      <router-link to = '/mycollection' tag='li' class="mycollection">
        <i class="iconfont icon-shoucang2"></i>
        <p>我的收藏</p>
        <i class="iconfont icon-arrow"></i>
      </router-link>
      <!-- 分割 -->
      <li class="border"></li>
      <!-- 我的订单 -->
      <router-link to = '/myorder' tag='li' class="myorder">
        <p>我的订单</p>
        <i class="iconfont icon-arrow"></i>
        <span>查看全部订单</span>
      </router-link>
      <li class="order-type">
        <ul class="order-type-ul">
          <li>
            <div class="iconfont icon-wodedaifukuan"></div>
            <div>待付款</div>
          </li>
          <li>
            <div class="iconfont icon-icon-test"></div>
            <div>待发货</div>
          </li>
          <li>
            <div class="iconfont icon-daishouhuo"></div>
            <div>待收货</div>
          </li>
          <li>
            <div class="iconfont icon-quxiao"></div>
            <div>已取消</div>
          </li>
        </ul>
      </li>
      <!-- 分割 -->
      <li class="border"></li>
      <!-- 我的地址 -->
      <router-link to = '/myaddress' tag='li' class="myaddress">
        <p>我的地址</p>
        <i class="iconfont icon-arrow"></i>
      </router-link>
      <!-- 分割 -->
      <li class="border"></li>
      <!-- 会员中心 -->
      <router-link to = '/mycollection' tag='li' class="mycollection">
        <i class="iconfont icon-ningmeng"></i>
        <p>会员中心</p>
        <i class="iconfont icon-arrow"></i>
      </router-link>
      <!-- 设置 -->
      <router-link to = '/mycollection' tag='li' class="mycollection">
        <i class="iconfont icon-shezhi"></i>
        <p>设置</p>
        <i class="iconfont icon-arrow"></i>
      </router-link>
      <!-- 联系客服 -->
      <router-link to = '/mycollection' tag='li' class="mycollection">
        <i class="iconfont icon-kefu"></i>
        <p>联系客服</p>
        <i class="iconfont icon-arrow"></i>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  created () {
    if (localStorage.getItem('isLogin') === 'ok') {
      this.$router.push('/user/login')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
//用户信息
.userInfo {
  @include rect(100%, 25%);
  background: url(./../../assets/xing.png) no-repeat;
  background-size:100% 110%;
  @include border(0 0 0.01rem 0, #666, solid)
}
//列表
.user-ul {
  @include rect(100%, 75%);
  overflow: auto;
  li {
    @include rect(100%, 0.5rem);
    @include padding(0 0.2rem);
    @include border(0 0 0.01rem 0, #666, solid);
    i {
      @include rect(0.5rem, 0.5rem);
      float: left;
      font-size: 0.25rem;
      text-align: center;
      line-height: 0.5rem;
    }
    p {
      float: left;
      @include margin(0 0 0 0.1rem);
      text-align: left;
      line-height: 0.5rem;
      font-size: 0.17rem;
    }
    span {
      float: right;
      line-height: 0.5rem;
      color: #d1d1d1
    }
    .icon-arrow {
      font-size: 0.15rem;
      float: right
    }
  }
  .border {
    @include rect(100%, 0.1rem);
    background: #ccc
  }
  //我的订单  部分
  .order-type {
    @include rect(100%, 0.9rem);
    .order-type-ul{
      @include rect(100%, 0.9rem);
      @include flexbox();
      @include justify-content(space-between);
      @include align-items();
      li {
        @include rect(0.9rem, 0.9rem);
        @include padding(0.1rem 0);
        @include flexbox();
        @include flex-direction(column);
        @include justify-content(space-around);
        @include align-items();
        .iconfont {
          font-size: 0.35rem;
        }
      }
    }
  }
}
</style>
